import React, { Component } from 'react';
import {
    StyleSheet, Text, View
} from "react-native";
import { GLOBAL } from '../../../config/global';
import { style } from '../../../theme/style';
import { UserHeadCpt } from './UserHeadCpt';
import { STORAGE_CONSTANT } from '../../../config/storage';
import StorageHelper from '../../../utils/storageHelper';


const scale = GLOBAL.SCALE;
export class HeadInfoScroll extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    componentWillMount () {
        this._userInfo();
    }

    // 获取用户基本信息
    _userInfo = async () => {
        let account = null;
        try {
            account = await StorageHelper.get(STORAGE_CONSTANT.USER_INFO_KEY);
        } catch (error) {
            console.log(error);
        }
        this.userInfo = JSON.parse(account) || {};
        this.setState({ ls: true })
    }

    render () {
        let { userName, organName } = this.userInfo || {};
        return (
            <View style={styles.container} >
                <View style={styles.TopShow}>
                    <View style={styles.headBg}>
                        <UserHeadCpt data={{
                            stylesHeadImgBox: styles.headImgBox,
                            stylesHeadImg: styles.headImg,
                        }} />
                    </View>
                    <View style={styles.headInfo}>
                        <View style={styles.row}>
                            <Text style={styles.Name}>{userName && userName.length > 15 ? userName.substr(0, 15) : userName}</Text>
                            <Text style={styles.companyName}>{organName && organName.length > 6 ? organName.substr(0, 8) + "..." : organName}</Text>
                        </View>
                    </View>
                </View>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    TopShow: {
        width: '100%',
        flexDirection: 'row',
        alignItems: 'center',
        overflow: 'hidden',
        marginLeft: 20 * scale,
        marginRight: 20 * scale,
        marginBottom: 20 * scale,
    },
    headBg: {
        width: 45 * scale,
        height: 45 * scale,
        backgroundColor: '#fff',
        borderRadius: 30 * scale,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        marginRight: 20 * scale
    },
    headImgBox: {
        width: 40 * scale,
        height: 40 * scale,
    },
    headImg: {
        width: 40 * scale,
        height: 40 * scale,
        borderRadius: 20 * scale
    },
    Name: {
        fontSize: 20 * scale,
        color: style.color.white,
        fontWeight: 'bold',
        marginTop: 8 * scale,
        marginBottom: 10 * scale,
        marginRight: 15 * scale
    },
    companyName: {
        color: style.color.white,
        fontSize: 13 * scale,
    },
    headInfo: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        width: 250 * scale
    },
    row2: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        width: '100%'
    },
    row: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
    headMore: {
        height: 20 * scale,
        width: 5 * scale,
        tintColor: style.color.white,

    },
    clickMore: {
        width: 40 * scale,
        height: 30 * scale,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        position: 'relative',
        marginRight: 5 * scale
    },
    scanImage: {
        width: 20 * scale,
        height: 20 * scale,
        tintColor: style.color.white,
    },
    clickScan: {
        padding: 5 * scale,
    },
    infoSetting: {
        fontSize: 12 * scale,
        color: '#fff'
    },
    tipBox: {
        flexDirection: 'row',
        // position: 'absolute',
        // right: 0,
        // top: 15 * scale,
        zIndex: 2,
    },
    icon: {
        fontSize: 22 * scale,
        color: '#fff'
    },
    number: {
        position: 'absolute',
        left: 18 * scale,
        top: 0,
        backgroundColor: style.color.fontRed1,
        paddingLeft: 5 * scale,
        paddingRight: 5 * scale,
        paddingTop: 1 * scale,
        paddingBottom: 1 * scale,
        zIndex: 1,
        borderRadius: 6 * scale,
        flexDirection: 'row',
        alignItems: 'center'
    },
    messageMore: {
        color: style.color.white,
        fontSize: 9 * scale,
        lineHeight: 9 * scale,
        margin: 0,
        padding: 0
    },
})